<fs-page-bar></fs-page-bar>  
<nz-card [nzBordered]="false">
  <!-- <form nz-form [nzLayout]="'inline'" class="search__form"> -->
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="8" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="no">{{'AbpIdentity::PagerSearch' | abpLocalization }}</nz-form-label>
          <nz-form-control>
            <input nz-input type="search" [placeholder]="'AbpUi::PagerSearch' | abpLocalization" [(ngModel)]="list.filter" />
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  <!-- </form> -->
  <button nz-button [abpPermission]="'AbpIdentity.Users.Create'" (click)="add()" [nzType]="'primary'">
    <i nz-icon nzType="plus"></i>
    <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
  </button>
  <div class="my-md"></div>
  <nz-table #basicTable [nzData]="data$ | async" [nzPageSize]="list.maxResultCount" [nzTotal]="totalCount$ | async"
    [nzLoading]="list.isLoading$ | async" [nzFrontPagination]="false" (nzPageIndexChange)="list.page=$event-1;">
    <thead>
      <tr>
        <th>{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</th>
        <th>{{ 'AbpIdentity::DisplayName:Email' | abpLocalization }}</th>
        <th>{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</th>
        <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{ data.userName }}</td>
        <td>{{ data.email }}</td>
        <td>{{ data.phoneNumber }}</td>
        <td>
          <a class="ant-dropdown-link" nz-dropdown [nzDropdownMenu]="opMenu">
            {{ 'AbpIdentity::Actions' | abpLocalization }}
            <i nz-icon nzType="down"></i>
          </a>
          <nz-dropdown-menu #opMenu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item [abpPermission]="'AbpIdentity.Users.Update'" (click)="edit(data.id)">
                {{ 'AbpIdentity::Edit' | abpLocalization }}</li>
              <li nz-menu-item [abpPermission]="'AbpIdentity.Users.ManagePermissions'"
                (click)="openPermissionsModal(data.id)">
                {{ 'AbpIdentity::Permissions' | abpLocalization }}</li>
              <li nz-menu-item [abpPermission]="'AbpIdentity.Users.Delete'" (click)="delete(data.id, data.userName)">
                {{ 'AbpIdentity::Delete' | abpLocalization }}</li>
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>
<nz-modal [nzStyle]="{ top: '20px' }" [(nzVisible)]="isModalVisible" [nzTitle]="modalTitle" [nzContent]="modalContent"
  [nzFooter]="modalFooter" (nzOnCancel)="isModalVisible=false">
  <ng-template #modalTitle>
    {{(selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization}}
  </ng-template>

  <ng-template #modalContent>
    <ng-template #loaderRef>
      <div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div>
    </ng-template>

    <form nz-form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
      <nz-tabset>
        <nz-tab nzTitle="{{'AbpIdentity::UserInformations' | abpLocalization}}">
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="user-name">
              {{ 'AbpIdentity::UserName' | abpLocalization }}</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" >
              <input nz-input formControlName="userName" id="user-name" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input formControlName="name" id="name" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="surname">
              {{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input formControlName="surname" id="surname" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>
              {{ 'AbpIdentity::Password' | abpLocalization }}</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input type="password" id="password" formControlName="password" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">
              {{ 'AbpIdentity::EmailAddress' | abpLocalization }}</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input formControlName="email" id="email" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input formControlName="phoneNumber" id="phoneNumber" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <label nz-checkbox formControlName="lockoutEnabled">
                <span>
                  {{
                  'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization
                  }}
                </span>
              </label>
            </nz-form-control>
          </nz-form-item>
        </nz-tab>
        <nz-tab nzTitle="{{'AbpIdentity::Roles' | abpLocalization}}">
          <nz-form-item>
            <nz-form-control *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn">
              <label nz-checkbox [formControl]="roleGroup.controls[roles[i].name]">
                <span>
                  {{ roles[i].name }}
                </span>
              </label>
            </nz-form-control>
          </nz-form-item>
        </nz-tab>
      </nz-tabset>
    </form>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="isModalVisible=false;this.form = null;">
      {{ 'AbpIdentity::Cancel' | abpLocalization }}
    </button>
    <button nz-button nzType="primary" (click)="save()" [disabled]="form?.invalid">
      {{
      'AbpIdentity::Save' | abpLocalization
      }}
    </button>
  </ng-template>
</nz-modal>
<ng-alain-permission-management [(visible)]="visiblePermissions" providerName="U" [providerKey]="providerKey">
</ng-alain-permission-management>
